<template>
  <div class="search-wrapper">
    <div v-for="item in search" :key="item.value" class="search-item">
      <span v-if="item.name != '~'" :style="{ width: `${item.name.length + 1}em`, fontSize: '16px' }">{{ `${item.name}：` }}</span>
      <span v-else :style="{ width: `${item.name.length + 1}em`, fontSize: '16px' }">{{ `${item.name}` }}</span>
      <a-input v-if="item.type === 'input'" :placeholder="item.placeholder ? item.placeholder : ''"
        v-model="searchValue[item.value]" :style="item.style ? item.style : 'width:60%'" allowClear ></a-input>
      <a-input v-if="item.type === 'inputUnit'" :placeholder="item.placeholder ? item.placeholder : ''"
        v-model="searchValue[item.value]" :style="item.style ? item.style : 'width:60%'" allowClear addon-after="%"></a-input>
      <a-textarea v-if="item.type === 'textarea'" :placeholder="item.placeholder ? item.placeholder : ''"
        v-model="searchValue[item.value]" :style="item.style ? item.style : 'width:60%'" :autosize="autosize"
        allowClear></a-textarea>


      <a-select v-if="item.type === 'select'" :placeholder="item.placeholder ? item.placeholder : ''"
        v-model="searchValue[item.value]" :style="item.style ? item.style : 'width: 150px'"
        :options="item.selectOptions" allowClear></a-select>
      <a-select v-if="item.type === 'select_input'" v-model="searchValue[item.value]" optionFilterProp="label"
        mode="multiple" :placeholder="item.placeholder ? item.placeholder : ''"
        :style="item.style ? item.style : 'width: 150px'" :allowClear="true">
        <a-select-option v-for="item2 in item.selectOptions" :key="item2.id" :value="item2.id"
          :label="item2.channelName">
          {{ item2.channelName }}
        </a-select-option>
      </a-select>
      <a-select  v-if="item.type === 'select_input_one'"  :placeholder="item.placeholder ? item.placeholder : ''"  v-model="searchValue[item.value]" show-search  style="width: 200px"
        :options="item.selectOptions"  :style="item.style ? item.style : 'width: 150px'" :filter-option="filterOption"></a-select>
      <a-select  v-if="item.type === 'select_input_tow'"  :placeholder="item.placeholder ? item.placeholder : ''"  v-model="searchValue[item.value]" show-search  style="width: 200px"
        :options="item.selectOptions"  :style="item.style ? item.style : 'width: 150px'" :filter-option="filterOption_tow"></a-select>
      <a-select  v-if="item.type === 'select_input_three'"  :placeholder="item.placeholder ? item.placeholder : ''"  v-model="searchValue[item.value]" show-search  style="width: 200px"
        :options="item.selectOptions"  :style="item.style ? item.style : 'width: 150px'" :filter-option="select_input_three"></a-select>
      <a-range-picker v-if="item.type === 'date'" v-model="searchValue[item.value]"
        :style="item.style ? item.style : ''" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" allowClear />
      <a-date-picker v-if="item.type === 'date1'" v-model="searchValue[item.value]"
        :style="item.style ? item.style : ''" :showTime="!!item.showTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"
        allowClear />
      <a-range-picker v-if="item.type === 'date2'" v-model="searchValue[item.value]"
        :style="item.style ? item.style : ''" :showTime="!!item.showTime" format="YYYY-MM-DD HH:mm:ss"
        valueFormat="YYYY-MM-DD HH:mm:ss" allowClear />
      <a-range-picker v-if="item.type === 'date3'" v-model="searchValue[item.value]"
        :style="item.style ? item.style : ''" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" allowClear />
      <a-cascader @change="handleChange($event, item.value, item.selectLevel)" v-if="item.type === 'cascaderSelect'"
        :placeholder="item.placeholder ? item.placeholder : ''" :style="item.style ? item.style : 'width: 150px'"
        :options="item.selectOptions" />
    </div>
    <div class="search-button">
      <a-button type="primary" @click="searchData">查询</a-button>
      <a-button @click="resetData">重置</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseSearch',
  props: {
    search: {
      type: Array,
      required: true,
      default: () => {
        return [];
      },
    },
    isClear: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchValue: {},
      treeData: [],
      autosize: { minRows: 1, maxRows: 6 },
    };
  },
  watch: {
    isClear() {
      this.searchValue = Object.assign({});
    },
  },
  created() {
    this.initializeDefaultDates();
  },
  methods: {
    filterOption_tow(input, option){
console.log(input, option.data.props.productNike)
return option.data.props.productNike.indexOf(input) >= 0;
// option.data.props.
    },
    select_input_three(input, option){
      // console.log('走进来')
// console.log(input, option)
return option.data.props.institutionName.indexOf(input) >= 0;
// option.data.props.
    },
    filterOption(input, option) {
      return option.data.props.channelName.indexOf(input) >= 0;
    },

    initializeDefaultDates() {
      // this.search.forEach(item => {
      //   // console.log(item)
      //   if (item.type === 'date3') {

      //     const currentValue = this.searchValue[item.value];
      //     if (!currentValue || currentValue.length === 0) {
      //       const today = this.formatDate(new Date());
      //       this.$set(this.searchValue, item.value, [today, today]);
      //     }
      //   }
      // });
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      return `${year}-${month}-${day}`;
    },
    handleChange(val, type, selectLevel) {
      this.searchValue[type] = val[selectLevel];
    },
    searchData() {
      this.$emit('searchData', this.searchValue);
    },
    resetData() {
      this.searchValue = Object.assign({});
      this.$emit('resetData', this.searchValue);
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.search-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .search-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 20px;

    span {
      display: inline-block;
    }
  }

  .search-button {
    margin-bottom: 20px;

    button:not(:last-child) {
      margin-right: 20px;
    }
  }
}
</style>
